<template>
    <el-dialog v-model="showSetting" title="管理设置" :before-close="handleClose">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="代理设置" name="first">
                <div class="setting">
                    <div class="form">
                        <el-form
                            class="demo-form-inline"
                            label-position="right"
                            label-width="120px"
                        >
                            <el-form-item label="OpenAi官方地址">
                                <el-input
                                    v-model="chatConfig.baseUrl"
                                    style="width: 100%"
                                    placeholder="OpenAi官方地址"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item label="密钥key">
                                <el-input
                                    v-model="chatConfig.key"
                                    style="width: 100%"
                                    placeholder="密钥key"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item label="连接类型">
                                <el-select
                                    v-model="chatConfig.proxyType"
                                    placeholder="连接类型"
                                    clearable
                                >
                                    <el-option label="直连" value="DIRECT" />
                                    <el-option label="代理" value="PROXY" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="代理Ip">
                                <el-input
                                    v-model="chatConfig.proxyIp"
                                    style="width: 100%"
                                    placeholder="输入代理Ip"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item label="代理端口">
                                <el-input
                                    v-model="chatConfig.port"
                                    style="width: 100%"
                                    placeholder="输入代理端口"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item>
                                <span class="dialog-footer">
                                    <el-button @click="showSetting = false">取消</el-button>
                                    <el-button type="primary" @click="save"> 保存 </el-button>
                                </span>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户管理" name="second">
                <el-button type="primary" @click="showAdd = true">添加</el-button>
                <el-table :data="userVOs" style="width: 100%">
                    <el-table-column label="用户名称" prop="userName" width="100" />
                    <el-table-column label="用户账号" prop="userAccount" width="100" />
                    <el-table-column label="用户邮箱" prop="userEmail" width="200" />
                    <el-table-column label="用户次数" prop="frequency" width="100" />
                    <el-table-column align="right">
                        <template #header>
                            <el-input size="small" placeholder="Type to search" />
                        </template>
                        <template #default="scope">
                            <el-button size="small" type="danger" @click="removeUser(scope.row.id)"
                                >删除</el-button
                            >
                            <el-button size="small" type="danger" @click="resetUser(scope.row.id)"
                                >重置密码</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-model:current-page="pageRO.current"
                    v-model:page-size="pageRO.size"
                    style="float: right; padding-top: 10px"
                    background
                    layout="prev, pager, next, sizes"
                    :total="total"
                    :page-sizes="[10, 20, 30]"
                />

                <el-dialog v-model="showAdd" title="创建用户" width="500">
                    <el-form :model="createUser">
                        <el-form-item label="用户名" label-width="100">
                            <el-input v-model="createUser.userName" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="账号" label-width="100">
                            <el-input v-model="createUser.userAccount" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="邮箱" label-width="100">
                            <el-input v-model="createUser.email" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码" label-width="100">
                            <el-input
                                v-model="createUser.password"
                                type="password"
                                autocomplete="off"
                            />
                        </el-form-item>
                        <el-form-item label="次数" label-width="100">
                            <el-input-number v-model="createUser.frequency" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="createUserClear">取消</el-button>
                            <el-button type="primary" @click="createUserSave">保存</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="生成兑换码" name="third">
                <div class="setting">
                    <div class="form">
                        <el-form
                            class="demo-form-inline"
                            label-position="right"
                            label-width="120px"
                        >
                            <el-form-item label="免费次数">
                                <el-input
                                    v-model="cetCodeRO.frequency"
                                    style="width: 100%"
                                    placeholder="免费次数"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item label="兑换码：">
                                <span>{{ code }}</span>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="gen"> 生成 </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        name: 'SettingComponent'
    });
</script>
<script lang="ts" setup>
    import { ref, watch } from 'vue';
    import { ChatConfig, FreeType, GetCodeRO } from '@/api/chatgpt/chatgpt';
    import { getChatConfig, saveChatConfig, getShowWxMiniApp, getCode } from '@/api/chatgpt/api';
    import { create, getUserPage, remove, reset } from '@/api/user/api';
    import { UserVO } from '@/api/user/user';
    import { PageRO } from '@/api/common';
    import { UserCreateRO } from '@/api/auth/auth';
    import { ElMessage } from 'element-plus';

    const value = ref(false);
    const activeName = ref('first');
    const userVOs = ref<UserVO[]>();
    const total = ref();
    const showAdd = ref(false);
    const createUser = ref<UserCreateRO>({
        userName: '',
        userAccount: '',
        email: '',
        password: '123456',
        frequency: 100
    });

    const pageRO = ref<PageRO>({
        current: 1,
        size: 10
    });

    const cetCodeRO = ref<GetCodeRO>({
        frequency: 0,
        freeType: FreeType.OTHER
    });

    const code = ref();

    function createUserClear() {
        showAdd.value = false;
        createUser.value.userAccount = '';
        createUser.value.userName = '';
        createUser.value.email = '';
        createUser.value.password = '123456';
        createUser.value.frequency = 100;
    }

    function removeUser(id: any) {
        remove(id).then(() => {
            loadUserPage();
        });
    }

    function resetUser(id: string) {
        reset(id).then(() => {
            loadUserPage();
        });
    }

    function createUserSave() {
        create(createUser.value).then(() => {
            ElMessage({
                showClose: true,
                message: '创建成功',
                type: 'success'
            });
            createUserClear();
            loadUserPage();
        });
    }

    async function loadShowWxMiniApp() {
        const res = await getShowWxMiniApp();
        value.value = res.data;
    }

    async function loadUserPage() {
        getUserPage(pageRO.value).then(({ data }) => {
            console.log(data);
            userVOs.value = data.data;
            total.value = data.total;
        });
    }

    const chatConfig = ref<ChatConfig>({
        baseUrl: '',
        key: '',
        proxyIp: '',
        port: 0,
        proxyType: ''
    });

    function gen() {
        getCode(cetCodeRO.value).then(({ data }) => {
            code.value = data;
        });
    }

    async function loadChatConfig() {
        getChatConfig().then(({ data }) => {
            chatConfig.value = data;
        });
    }

    function save() {
        saveChatConfig(chatConfig.value).then(() => {
            showSetting.value = false;
        });
    }

    const props = defineProps<{ showSetting: boolean }>();
    const emit = defineEmits(['down-setting']);
    const showSetting = ref(false);
    watch(
        () => props.showSetting,
        (newVale) => {
            showSetting.value = newVale;
            if (newVale) {
                loadChatConfig();
                loadShowWxMiniApp();
                loadUserPage();
            }
        }
    );
    function handleClose() {
        emit('down-setting');
    }
</script>
<style scoped>
    .setting {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form {
        width: 600px;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }
</style>
